/*
*填空题目添加 
*/
<template>
  <div>
    <el-form :model="tkqForm" ref="tkqForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="题干">
        <el-button round size="small" @click="addSpace">插入题空</el-button>
      </el-form-item>
      <el-form-item label>
        <el-input type="textarea" v-model="tkqForm.questionTxt" autosize></el-input>
      </el-form-item>
      <el-form-item v-for="(ele,index) in tkqForm.questionSpace" :key="index" label="temp">
        <div slot="label" class="orderNum">{{index+1}}</div>
        <div class="tkqAnwserLine">
          <el-input v-model="ele.fqAnswer" :placeholder="`请输入第${index+1}个空的答案`" size="small"></el-input>
          <el-input-number v-model="ele.fillQuestionScore[0].fqsScore" :min="0" size="small"></el-input-number>
        </div>
      </el-form-item>
      <el-form-item label="题目预览">
        <span
          v-for="(txt,indexs) in tkqForm.questionTxt.split('▁')"
          :key="indexs"
          v-html="txt+(tkqForm.questionSpace.length>indexs?`<input readonly class='tkAnwsers' value='${tkqForm.questionSpace[indexs].fqAnswer}' />(${tkqForm.questionSpace[indexs].fillQuestionScore[0].fqsScore}分)`:'')"
        ></span>
      </el-form-item>
      <el-form-item label>
        <el-button round size="small" @click="resetSpace">重置</el-button>
        <el-button
          type="primary"
          round
          icon="el-icon-document-checked"
          size="small"
          @click="addTkq"
        >新增题目</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["testPaperId", "radio"],
  data() {
    return {
      tkqForm: {
        questionTxt: "",
        sign: "▁",
        questionSpace: []
      }
    };
  },
  methods: {
    addSpace() {
      this.tkqForm.questionTxt += this.tkqForm.sign;
    },
    resetSpace() {
      this.tkqForm.questionTxt = "";
      this.tkqForm.questionSpace = [];
    },
    addTkq() {
      let tkqTxet = this.tkqForm.questionTxt;
      let tkqSpace = this.tkqForm.questionSpace;
      if (!tkqTxet.trim()) {
        this.$message.warning("请输入题干信息");
      } else if (tkqSpace.length <= 0) {
        this.$message.warning("请输入填空信息");
      } else {
        let k = true;
        for (let i = 0; i < tkqSpace.length; i++) {
          if (tkqSpace[i].fqAnswer.trim() == "") {
            this.$message.warning(`请输入填空项${i + 1}的信息`);
            k = false;
            break;
          }
        }
        if (k) {
          this.addTkQuestion();
          this.resetSpace();
        }
      }
    },
    addTkQuestion() {
      let tkqInfos = this.tkqForm;
      let tkqTxet = tkqInfos.questionTxt;
      let tkqSpace = tkqInfos.questionSpace;
      let tpqScore = 0;
      tkqSpace.forEach(i => {
        tpqScore += i.fillQuestionScore[0].fqsScore;
      });
      let parm = {
        tpqPaperId: this.testPaperId, //试卷的编号
        tpqScore, //题目的分值
        tpqQuestion: {
          questionTitle: tkqTxet, //填空题的标题
          questionTypeId: this.radio, //题目类型 1=选择题 2=填空题 3=问题
          fillQuestion: tkqSpace
        }
      };
      this.axios
        .post("/api/TestPaper/AddQuestionToTestPaper", parm)
        .then(res => {
          if (res.data.code == 1) {
            this.$message.success(res.data.message);
            this.$emit('upSelectTopic')
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .catch(err => console.log(err));
    }
  },
  watch: {
    "tkqForm.questionTxt": {
      handler(newVal) {
        let newSpace = newVal.split(this.tkqForm.sign);
        let qSpace = this.tkqForm.questionSpace;
        for (let i = 0; i < newSpace.length - 1; i++) {
          if (i >= qSpace.length) {
            let tkAnwser = {
              fqOrder: i + 1,
              fqAnswer: "",
              fillQuestionScore: [
                {
                  fqsScore: 2 //第一个空的分值
                }
              ]
            };
            qSpace.push(tkAnwser);
          }
        }
        console.log(qSpace);
        for (let j = 0; j < qSpace.length; j++) {
          if (j >= newSpace.length - 1) {
            qSpace.splice(j, 1);
          }
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .tkAnwsers {
  width: 169px;
  outline: none;
  border: none;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.tkquestion {
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}
.orderNum {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background-color: #f56c6c;
  float: right;
  margin-top: 10px;
}
.tkqAnwserLine {
  display: flex;
  /deep/.el-input-number {
    margin-top: 5px;
  }
  /deep/.el-input:first-child input {
    border: none;
    border-bottom: 1px solid #ebeef5;
  }
}
</style>